//初始化dom
const operatorDOM = document.querySelector(".operator");
const albumNameTextDOM = operatorDOM.querySelector("input[type='text']");
const albumNameBtnDOM = operatorDOM.querySelector("button");
const addPhotoDOM = operatorDOM.querySelector("a");
const addFileDOM = operatorDOM.querySelector("input[type='file']");

const imageListDOM = document.querySelector(".image-list");
const fenyeDOM = document.querySelector(".fenye");
const albumListDOM = document.querySelector(".album-list");
const boxImageListDOM = document.querySelector(".box");
const defaultAlbumADOM = albumListDOM.querySelector("a");
var currentAlbum = "default";
var count=0;
defaultAlbumADOM.addEventListener("click",e=>{
  currentAlbum="default";
  // fenyeDOM.innerText="";
  renderPhotoList();
});
addPhotoDOM.addEventListener("click",function(event){
  addFileDOM.click();
});

// addFileDOM.addEventListener("change",function(event){
//   const file = addFileDOM.files[0];
//   const fr = new FileReader();
//   fr.onload = function(){
//     const image = new Image();
//     image.src = fr.result;
//     const divDOM = document.createElement("div");
//     divDOM.className = "image"
//     divDOM.appendChild(image);
//     imageListDOM.insertAdjacentElement("beforeEnd",divDOM);
//   }
//   fr.readAsDataURL(file);
// });

function uploadImage(img){
  const divDOM = document.createElement("div");
  divDOM.className = "image";
  divDOM.appendChild(img);
  imageListDOM.insertAdjacentElement("beforeEnd",divDOM);
  addPhoto(currentAlbum,divDOM);
  // count++;
  renderPhotoList();
}

albumNameBtnDOM.addEventListener("click",function(event){
  addAlbum(albumNameTextDOM.value);
  albumNameTextDOM.value ="";
  renderAlbumList();
});

function renderPhotoList(){
  imageListDOM.innerText = "";
  var photos = albumMap[currentAlbum];
  if(photos.length<=10){
    photos.forEach(img=>imageListDOM.appendChild(img));
  }else {
    photos.slice(0,10).forEach(img=>imageListDOM.appendChild(img));
  }
  renderFenye();

}

function renderFenye(){
  var photos = albumMap[currentAlbum];
  var num = photos.length/10
  var name = [];
  for(let i=0;i<=num;i++){
    // console.log(i);
    name.push(i);
  }
  console.log(name);
  ctFenye(name);
}

//创建分页
function ctFenye(name){
  var fenyeDOM = document.createElement("div");
  fenyeDOM.className="fenyeDiv";
  if(name){
    for(let i=0;i<name.length;i++){
      var pDOM = document.createElement("p");
      pDOM.innerText = name[i];
      pDOM.className="fenyeP";
      console.log(pDOM);
      pDOM.addEventListener("click",function(event){
        var index = parseInt(event.target.innerText);
        var photos = albumMap[currentAlbum];
        console.log(index);
        if(photos.length<10){
          imageListDOM.innerText="";
          renderFenye();
          photos.forEach(img=>imageListDOM.appendChild(img));
        }
        else{
          imageListDOM.innerText="";
          renderFenye();
          var subPhoto = photos.slice(index*10,index*10+10);
          subPhoto.forEach(img=>imageListDOM.appendChild(img));
        }
      });
      fenyeDOM.appendChild(pDOM);
  }
  }
  imageListDOM.appendChild(fenyeDOM);
}

function renderAlbumList(){
  const div = albumListDOM.querySelector("div");
  div.innerText = "";
  albumNames.forEach(function(name){
    var aDOM = document.createElement("a");
    aDOM.innerText = name;
    aDOM.href = "javascript:void();";
    aDOM.addEventListener("click",e=>{
      currentAlbum = name;
      // fenyeDOM.innerText="";
      renderPhotoList();
    })
    div.appendChild(aDOM);
  });
}
var albumNames = [];

var albumMap = {
  "default":[]
};
//创建相册
function addAlbum(name){
  albumNames.push(name);
  albumMap[name] = [];
}

//添加图片
function addPhoto(albumName,img){
  albumMap[albumName].push(img);
}
